window.addEventListener('load', function(){
    // 1.获取元素
    var btl = this.document.querySelector('.bt-l');
    var btr = this.document.querySelector('.bt-r');
    var focus=this.document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    // 2.鼠标经过显示按钮 离开隐藏按钮
    focus.addEventListener('mouseenter', function(){
        btl.style.display='block';
        btr.style.display='block';
        clearInterval(timer);
        timer = null;//鼠标经过时清除定时器
    })
    focus.addEventListener('mouseleave', function(){
       btl.style.display='none';
       btr.style.display='none';
       timer = setInterval(function(){
        // 手动调用点击事件
        btr.click();
    },2000);//鼠标离开时重开定时器
    })
    // 3.动态生成小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('ol');
    for(var i=0;i<ul.children.length;i++){
        // 创建一个li
        var li = this.document.createElement('li');
        // 记录当前圆圈索引号 自定义属性
        li.setAttribute('index',i);
        // 把li插入到ol
        ol.appendChild(li);
    // 4.绑定点击事件 点小圆圈
    li.addEventListener('click', function(){
        // 清除其他圆圈类名
        for(var i=0;i<ol.children.length;i++){
            ol.children[i].className='';
        }
        // 给当前li设置类名
        this.className='selected';
        // 5.点击小圆圈 移动图片 ul
        // ul的移动距离 圆圈索引号乘图片宽度的负值
        var index = this.getAttribute('index');
        // 把li的索引号给num 和 circle
        num = index;
        circle = index;
        animate(ul,-index * focusWidth);
        })
    }
    // 把ol里面的第一个li设置为selected
    ol.children[0].className='selected';
    // 6.克隆第一张图片 放到ul最后
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 7.点击右侧按钮，图片滚动一张
    var num = 0;
    var circle = 0;
    btr.addEventListener('click', function(){
        // 走到最后一张图快速复原 num改为0
        if(num == ul.children.length-1){
            ul.style.left=0;
            num = 0;
        }
        num++;
        animate(ul,-num * focusWidth);
        // 8.点击按钮 圆圈一起变化
        circle++;
        if(circle == ol.children.length){
            circle=0;
        }
        circleChange();
    });

    // 9.左侧按钮
    btl.addEventListener('click', function(){
        // 走到最后一张图快速复原 num改为0
        if(num == 0){
            num = ul.children.length-1;
            ul.style.left = -num * focusWidth + 'px';
        }
        num--;
        animate(ul,-num * focusWidth);
        // 8.点击按钮 圆圈一起变化
        circle--;
        circle = circle < 0 ? ol.children.length - 1 : circle;
        circleChange();
    });
    function circleChange(){
        for(var i = 0 ; i < ol.children.length; i++){
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'selected';
    }
    // 10.自动播放
    var timer = this.setInterval(function(){
        // 手动调用点击事件
        btr.click();
    },2000);
})